<template>
  <div class="app-container">
    <div class="filter-container">
      {{ $t('关键字') }}：
      <el-input size="small" clearable filterable style="width: 200px;" v-model="searchKey.desc"
                :placeholder="$t('请输入任意关键字')"></el-input>
      <el-select clearable v-model="searchKey.status" placeholder="请选择">
        <el-option :key="1" :label="$t('有效')" :value="1"><i class="el-icon-success"> {{$t('有效')}}</i></el-option>
        <el-option :key="2" :label="$t('无效')" :value="2"><i class="el-icon-error"> {{$t('无效')}}</i></el-option>
      </el-select>

      <el-button size="mini" icon="el-icon-search" @click="getSysMsgs" type="primary">{{ $t('搜索') }}</el-button>
      <el-tooltip class="item" effect="dark" :content="$t('刷新表单')" placement="top">
        <el-button @click="getSysMsgs" size="mini"  icon="el-icon-refresh" circle></el-button>
      </el-tooltip>
    </div>
    <el-table
      :data="sysMsgTableData"
      border stripe
      :header-cell-style="{background:'#eef1f6',color:'#606266',top:'5px'}"
      style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column align="center" prop="name" label="模版名称" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="title" label="消息标题"  show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="content" label="消息内容" width="200" >
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="400"
            trigger="click">
            <h4 align="center">{{$t('标题')+': '+scope.row.title}}</h4>
            <p style="border: #c4c9d3 1px dashed ;padding: 10px;border-radius: 10px;text-align: center">{{scope.row.content}}</p>
            <el-button icon="el-icon-thumb" type="text" slot="reference">{{$t('内容')}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="消息类型" width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{sysServiceMap[scope.row.type]}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="service" label="消息服务端" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            v-model="scope.row.status"
            @change="switchValue(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updateTime" label="更新时间" width="200" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" :label="$t('Operate')" class-name="small-padding fixed-width" width="200">
        <template slot="header" slot-scope="{row}">
          {{ $t('Operate') }}
          <i class="el-icon-setting" style="color: #d35e32;"></i>
        </template>
        <template slot-scope="scope">
          <el-button @click="handleEditClick(scope.row)" type="text"><i class="el-icon-edit"></i>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>10" :total="total" :page.sync="searchKey.page" :limit.sync="searchKey.limit"
                @pagination="getSysMsgs"/>

    <el-dialog
      :title="$t('编辑')"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form label-position="top" label-width="80px" :model="sysForm">
        <el-form-item label="模版名称">
          <el-input disabled v-model="sysForm.name"></el-input>
        </el-form-item>
        <el-form-item label="消息标题">
          <el-input v-model="sysForm.title"></el-input>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input
            type="textarea"
            autosize
            :autosize="{ minRows: 2}"
            placeholder="请输入内容"
            v-model="sysForm.content">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button icon="el-icon-close" @click="dialogVisible = false">{{ $t('取消') }}</el-button>
    <el-button icon="el-icon-edit" type="primary" @click="handleEdit(sysForm)">{{ $t('提交编辑') }}</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import {sysMsgs,sysMsgStatus,sysMsgEdit} from "@/api/sysMsg";
import Pagination from '@/components/Pagination'
export default {
  name: "messageTemplate",
  components: {Pagination},
  data(){
    const sysServiceMap={
      1: this.$t('短信'),
      2: this.$t('邮箱'),
      3: this.$t('管理台')
    }
    return{
      sysServiceMap,
      searchKey: {
        desc: undefined,
        status:undefined,
        service:undefined,
        type:undefined,
        page: 1,
        limit: 20,
      },
      sysForm:{},
      dialogVisible: false,
      sysMsgTableData:[],
      total: 0,
      listLoading: false,
    }
  },
  created() {
    this.getSysMsgs()
  },
  methods: {
    getSysMsgs(){
      this.listLoading=true
      sysMsgs(this.searchKey).then(res=>{
        this.sysMsgTableData=res.data.data.list
        this.total=res.data.data.total
        this.listLoading=false
        console.log(JSON.stringify(res))
      }).catch(() => {
        this.sysMsgTableData = []
        this.total = 0
        this.listLoading = false
      })
    },
    switchValue(row){
      sysMsgStatus(row).then(res=>{

      }).catch(() => {
        row.status=!row.status
        this.$notify.error({
          title: '错误',
          message: '执行失败！'
        });
      })
    },
    handleEditClick(row){
      this.dialogVisible = true
      this.sysForm=row
    },
    handleEdit(row){
      sysMsgEdit(row).then(res=>{
        this.$notify({
          title: '成功',
          message: '编辑成功',
          type: 'success'
        });
        this.dialogVisible = false
      }).catch(() => {
        this.$notify.error({
          title: '错误',
          message: '编辑失败！'
        });
        this.dialogVisible = false
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style scoped>

</style>
